<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-input v-model="params.title" placeholder="搜索昵称"
            @change="getList"
            @enter="getList"
            clearable
            :style="{
            width: '220px'
          }"/>
        </div>
        <el-button-group>
          <el-button type="primary" @click="dialog(0)">添加</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table class="table-row-optimize"
      tooltip-effect="dark"
      ref="multipleTable"
      v-loading="state.loading"
      :data="state.tableData">
      <el-table-column type="selection" width="40"/>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="deleted_at" label="状态" align="center" width="120">
        <template #default="scope">
          <el-button text type="danger" v-if="scope.row.deleted_at">隐藏</el-button>
          <el-button text type="success" v-else>正常</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="发布时间" align="center" width="240">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="300">
        <template #default="scope">

          <el-button type="primary" @click="dialog(scope.row.id)">修改</el-button>

          <el-button type="warning" v-if="scope.row.deleted_at"
            @click="deleted(scope.row)">显示
          </el-button>
          <el-popconfirm title="确定要删除吗？" v-else
            cancel-button-text="否"
            confirm-button-text="是"
            @confirm="deleted(scope.row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>

  <dialog-message ref="refMessage" :reload="getList"/>
</template>

<script setup>
import { toDateTime } from '../utils'
import { onMounted, reactive } from 'vue'
import crud from "../utils/crud";

import { AdminMessageDelete, AdminMessageList } from '../api/server/message'
import DialogMessage from '../components/DialogMessage.vue'

const refMessage = ref(null)
const state = reactive({ loading: false, tableData: [], total: 0 })
const params = reactive({ page: 1, limit: 10, title: '' })

onMounted(() => {
  getList()
})

const getList = async (page) => {
  if (page) params.page = page
  state.loading = true
  const { data, current_page, total } = await AdminMessageList(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false
}
const changePage = (page) => getList(page)
const dialog = id => refMessage.value.open(id)
const deleted = (row) => crud.delete(AdminMessageDelete, row, [], getList)
</script>

<style scoped></style>
